<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加速运动</title>
</head>
<body>
    <style>
         .box{
        width: 100px;
        height: 100px;
        background-image: linear-gradient(to right,yellow, rgba(255,0,0,1));
        /* 线性渐变 */
        border-radius: 50%;
        box-shadow: 4px 3px 7px 4px coral;
           /* 给元素添加阴影 */
        position: absolute;
        left:0px;
     
   }
    </style>
</body>
<div class="box"></div>
<script>
    var box=document.querySelector('.box');
    let left=0;
    let speed=0;
    // 定时器
    let times=setInterval(()=>{
        speed+=10;
        left=left+speed;
        if(left>=1000){
            left=1000;
            // 取消定时
            clearInterval(times)
        }
        box.style.left=left+'px';

    },50)
</script>
</html>